<template>
	<view id="tab-bar">
		<view class="tab-bar-content left-content">
			<view class="tab-item" @click="console.log('shouye')">
				<image :src="src"></image>
				<view class="item-text">首页</view>
			</view>
			<view class="tab-item">
				<image src="../../static/tab/chanping3.png"></image>
				<view class="item-text">全部服务</view>
			</view>
			<view class="tab-item">
				<image src="../../static/tab/kefu1.png"></image>
				<view class="item-text">在线管家</view>
			</view>
			<view class="tab-item">
				<image src="../../static/tab/wode1.png"></image>
				<view class="item-text">我的</view>
			</view>
		</view>
		<view class="tab-bar-content right-content">
			<view class="tab-item change-but">
				<image src="../../static/tab/cb_f.png" class="cover"></image>
				<image src="../../static/tab/gc.png"></image>
				<view class="item-text">去企业</view>
			</view>
		</view>
	</view>
</template>

<script>
	import img from '../../common/image/image.js'

	export default {
		data() {
			return {
				src: img.tabs.home,
			};
		}
	}
</script>

<style lang="scss">
	#tab-bar {
		height: 106upx;
		position: fixed;
		bottom: 0;
		background: white;
		width: 100%;

		.tab-bar-content {
			position: absolute;
			display: flex;
			background: white;

			height: 106upx;

			.tab-item {
				line-height: 1;
				margin: 0 33upx;
				padding-top: 6upx;

				image {
					width: 60upx;
					height: 60upx;
					margin-left: 15upx;
				}

				view {
					text-align: center;
					margin-top: 0;
					width: 84upx;
					font-size: 20upx;
				}

				&.change-but {
					position: relative;
					color: white;
					margin-right: 26upx;

					.cover {
						position: absolute;
						top: -26upx;
						left: -624upx;
						width: 752upx;
						height: 132upx;
						z-index: -1;
						margin: 0;
						pointer-events: none;
					}
				}
			}

			&.left-content {
				left: 0;
				right: 158upx;
			}

			&.right-content {
				right: 0;
				left: 592upx;
				z-index: 1;
				.tab-item {
					padding-left: 30upx;
				}
			}

		}
	}
</style>
